<script setup>
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  Setting,
  InfoFilled,
  SwitchButton,
  PieChart as PieChartIcon,
  DataAnalysis,
  Warning,
  Document,
  Coin,
} from "@element-plus/icons-vue";
import userSvg from "@/assets/user.svg";

const router = useRouter();
const route = useRoute();
const showDropdown = ref(false);

// 修正后的菜单配置（所有路径添加/financial前缀）
const menus = [
  {
    path: "/financial/tax",
    name: "税务管理",
    icon: Document,
  },
  {
    path: "/financial/reports",
    name: "财务报表管理",
    icon: DataAnalysis,
  },
  {
    path: "/financial/rent-fees",
    name: "租金与费用管理",
    icon: Coin,
  },
  {
    path: "/financial/budget-cost",
    name: "预算与成本管理",
    icon: PieChartIcon,
  },
];

// 自动获取当前激活菜单（基于路由路径）
const activeMenu = computed(() => route.path);
</script>

<template>
  <div class="layout">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="logo">智慧园区财务系统</div>
      <div class="user-info">
        <span class="username">你好，懒熊</span>
        <div class="dropdown">
          <el-avatar
            :size="36"
            :src="userSvg"
            style="background-color: transparent; margin-top: 5px"
            @click="showDropdown = !showDropdown"
          />
          <transition name="el-fade-in">
            <div v-show="showDropdown" class="dropdown-content">
              <a @click.prevent="router.push('/profile')">
                <el-icon><Setting /></el-icon> 个人设置
              </a>
              <a @click.prevent="router.push('/settings')">
                <el-icon><InfoFilled /></el-icon> 系统信息
              </a>
              <a @click.prevent="router.push('/login')">
                <el-icon><SwitchButton /></el-icon> 退出登录
              </a>
            </div>
          </transition>
        </div>
      </div>
    </header>

    <div class="main-container">
      <!-- 侧边栏菜单 -->
      <aside class="sidebar">
        <ul>
          <li v-for="menu in menus" :key="menu.path">
            <router-link
              :to="menu.path"
              class="menu-item"
              :class="{
                active:
                  activeMenu.startsWith(menu.path) ||
                  (menu.path === '/financial/budget-cost' &&
                    activeMenu === '/financial'),
              }"
            >
              <el-icon v-if="typeof menu.icon === 'object'">
                <component :is="menu.icon" />
              </el-icon>
              <el-icon v-else>
                <component :is="$icons[menu.icon]" />
              </el-icon>
              <span>{{ menu.name }}</span>
            </router-link>
          </li>
        </ul>
      </aside>

      <!-- 主内容区 -->
      <main class="content">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </main>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use "@/styles/variables" as *;
@use "sass:color";

.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: $header-height;
  background: $primary-color;
  color: white;
  box-shadow: $box-shadow;
  z-index: 1000;

  .logo {
    font-size: 20px;
    font-weight: bold;
    color: white; // 使用纯色代替渐变
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;

    .username {
      font-size: 14px;
    }

    .dropdown {
      position: relative;

      &-content {
        position: absolute;
        right: 0;
        top: 50px;
        min-width: 160px;
        background: white;
        border-radius: 4px;
        box-shadow: $box-shadow;
        overflow: hidden;

        a {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 16px;
          color: $text-color;
          font-size: 14px;
          transition: all 0.3s;

          &:hover {
            background: $hover-bg;
            color: $primary-color;
          }

          .el-icon {
            font-size: 16px;
          }
        }
      }
    }
  }
}

.main-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: $sidebar-width;
  background: white;
  border-right: 1px solid $border-color;
  overflow-y: auto;

  ul {
    padding: 10px 0;
    list-style: none;

    li {
      margin: 4px 0;
    }
  }

  .menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    color: $text-color;
    text-decoration: none;
    transition: all 0.3s;
    position: relative;

    &.active {
      color: $primary-color;
      background: $active-bg;
      border-left: 3px solid $primary-color;

      &::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 6px;
        background: $primary-color;
        border-radius: 50%;
      }
    }

    &:hover:not(.active) {
      background: $hover-bg;
      color: $primary-color;
    }

    .el-icon {
      font-size: 18px;
    }
  }
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: $content-bg;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
